<template>
  <el-dropdown placement="bottom">
    <div class="el-dropdown-link">
      <el-icon><ArrowDown/></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item class="tab-ddropdown-item"   @click="closeCurrentPage">关闭当前页面</el-dropdown-item>
        <el-dropdown-item class="tab-ddropdown-item"   @click="closeOtherPage">关闭其他页面</el-dropdown-item>
        <el-dropdown-item class="tab-ddropdown-item"   @click="closeAll">关闭全部页面</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { ArrowDown } from '@element-plus/icons-vue'
export default {
  name: 'TagPageClose',
  components: {
    ArrowDown
  },
  props: {
    tabs: {
      type: Array,
      default: () => {
        return []
      }
    },
    currentIndex: {
      type: Number,
      default: -1
    }
  },
  setup(props) {
    function closeCurrentPage () {
      if (props.currentIndex === -1) {
        return;
      }
      console.log(props.currentIndex)
      props.tabs.splice(props.currentIndex, 1);
    }
    function closeOtherPage () {
      if (props.currentIndex === -1) {
        return
      }
      props.tabs.splice(props.currentIndex + 1, props.tabs.length - props.currentIndex - 1);
      props.tabs.splice(0, props.currentIndex);
    }
    function closeAll () {
      if (props.currentIndex === -1) {
        return
      }
      props.tabs.splice(0, props.tabs.length)
    }
    return {
      closeCurrentPage,
      closeOtherPage,
      closeAll
    }
  }
}
</script>

<style scoped>

</style>
